<template>

  <div class="TeacherList">


    <el-container>
      <el-header>学生成绩管理系统</el-header>
      <el-container>
        <el-aside width="200px">
          <el-row class="tac">
            <el-col>
              <h5 class="el-submenu__title">系统首页</h5>
              <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                <el-submenu index="1">
                  <template slot="title">
                    <span>院系管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="1-1" @click="toschoollist">院系管理</el-menu-item>
                    <el-menu-item index="1-2">专业管理</el-menu-item>
                    <el-menu-item index="1-3">专业管理</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-submenu index="2">
                  <template slot="title">
                    <span>课程管理</span>
                  </template>
                </el-submenu>
                <el-submenu index="3">
                  <template slot="title">
                    <span>教师管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="3-1" @click="toteacherlist">教师列表</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-submenu index="4">
                  <template slot="title">
                    <span>学生管理</span>
                  </template>
                </el-submenu>
                <el-submenu index="5">
                  <template slot="title">
                    <span>成绩管理</span>
                  </template>
                </el-submenu>
                <el-submenu index="6">
                  <template slot="title">
                    <span>权限管理</span>
                  </template>
                </el-submenu>
                <el-submenu index="7">
                  <template slot="title">
                    <span>系统设置</span>
                  </template>
                </el-submenu>
              </el-menu>
            </el-col>

          </el-row>


        </el-aside>
        <el-main>
          <!-- 面包屑 -->
          <div class="mianbao">
            <BreadcrumbCom></BreadcrumbCom>
          </div>
          <router-view />
        </el-main>
      </el-container>
    </el-container>

  </div>

</template>

<script>
import BreadcrumbCom from "@/components/BreadcrumbCom.vue";
export default {
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
      // this.router.push("")
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    toteacherlist() {
      this.$router.push("/index/teacherlist")
    },
    toschoollist() {
      this.$router.push("/index/schoollist")
    }
  },
  components: {
    BreadcrumbCom
  },
}
</script>

<style lang="scss" scoped>
.TeacherList {
  width: 100%;
  height: 100%;
}

.el-container.is-vertical {
  display: flex;
  flex-direction: column;
}

.el-header {
  background-color: black;
  color: #333;
  font-size: 20px;
  line-height: 60px;
  padding-left: 20px;
  color: #E9EEF3;

}

.el-aside {
  background-color: rgb(238, 238, 238);
  color: #333;
  height: 1000px;

}

.el-menu-item.is-active {
  color: #fff;
  background-color: rgb(9, 180, 197);
}

.el-main {
  background-color: rgb(241, 241, 241);
  color: #333;
  text-align: center;
}

.el-menu-item-group__title {
  padding: 0 !important;
  z-index: 400;
}

.el-menu-vertical-demo {
  background-color: rgb(238, 238, 238) !important;
}

.el-breadcrumb__inner {
  color: #333;

}

.mianbao {
  height: 48px !important;
  width: 100%;
  padding: 16px 20px;
  background-color: #fff;
}
</style>